<script setup>
import { inject, onMounted, ref } from 'vue'
import Image1 from '../assets/png/img/user.jpg' // 确保图片路径正确
import Image2 from '../assets/png/img/balance.png' // 确保图片路径正确
import Image3 from '../assets/png/img/warning.png' // 确保图片路径正确
import mov1 from '../assets/png/img/move.png' // 确保图片路径正确
import mov2 from '../assets/png/img/move2.png' // 确保图片路径正确
import yzImage from '../assets/png/img/yz.png' // 确保图片路径正确
import fy from '../assets/png/img/fy.png' // 确保图片路径正确
import { onBeforeRouteLeave } from 'vue-router'
import { color } from 'echarts'
const allList = ref([
  {
    title: '人脸识别摄像头',
    num: '8',
    url: Image1
  },
  {
    title: '可控制摄像头',
    num: '20',
    url: Image2
  },
  {
    title: '故障摄像头',
    num: '2',
    url: Image3
  }
])
const value = ref(1)
const list = ref([
  {
    title: '监控1:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控2:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控3:T9北侧',
    time: '08.12 18',
    type: '已消警'
  },
  {
    title: '监控4:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控5:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控6:T9北侧',
    time: '08:12:18',
    type: '已消警'
  },
  {
    title: '监控7:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控8:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控9:T9北们',
    time: '08:12:18',
    type: '已消警'
  }
])
const moveList = ref([
  {
    title: '星关广场云台',
    url: mov1
  },
  {
    title: '底商北侧',
    url: mov1
  },
  {
    title: '后山艺术空间',
    url: mov1
  },
  {
    title: 'T9后面',
    url: mov2
  },
  {
    title: '门口',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  }
])
const energy = ref([
  {
    title: '本月总能耗 (单位：kw.h)',
    num: '11787'
  },
  {
    title: '本年总能耗 (单位:kw.h)',
    num: '210688'
  },
  {
    title: '本日总负荷 (单位:kw.h)',
    num: '73779'
  },
  {
    title: '本年平均能耗 (单位:kw.h)',
    num: '10127'
  },
  {
    title: '本日总电费 (单位:元)',
    num: '5646'
  },
  {
    title: '本年总电费 (单位:元)',
    num: '203231'
  }
])
const table = ref([
  ['天棚主机', 10462.7, 5620.3, 1.8, 2.3],
  ['天棚水坝', 2345.7, 5620.3, 12.8, 23.3],
  ['天棚主机', 3344.7, 5620.3, 12.8, 23.3],
  ['天棚水坝', 2354.7, 5620.3, 1.8, 2.3],
  ['天棚主机', 3422.7, 5620.3, 1.8, 2.3],
  ['天棚主机', 3422.7, 5620.3, 1.8, 2.3],
  ['天棚主机', 3422.7, 5620.3, 1.8, 2.3],
  ['天棚主机', 3422.7, 5620.3, 1.8, 2.3],
  ['天棚主机', 3422.7, 5620.3, 1.8, 2.3],
  ['天棚主机', 3422.7, 5620.3, 1.8, 2.3],
  ['天棚主机', 3422.7, 5620.3, 1.8, 2.3],
  ['天棚主机', 3422.7, 5620.3, 1.8, 2.3],
  ['天棚主机', 3422.7, 5620.3, 1.8, 2.3],
  ['天棚主机', 3422.7, 5620.3, 1.8, 2.3]
])
const camera_round = ref(null)
const data_content = ref(null)
const pie_content_1 = ref(null)
const line_content = ref(null)
const across_bar = ref(null)
let echarts = inject('echarts')
var myChartPie, myChartList, myChartPie_1, myChartBar, myChartLine
let optionBar = {
  grid: {
    top: '30',
    bottom: '34',
    left: '0',
    right: '10',
    containLabel: true
  },
  legend: {
    top: 'top', // 图例显示在顶部
    data: ['地热平衡', '节能环保'], // 图例项的名称，与 series.name 对应
    textStyle: {
      color: '#fff'
    }
    // 可以添加其他图例样式配置
  },
  xAxis: {
    min: '0', // 设置X轴的最小值
    max: '180', // 设置X轴的最大值
    splitNumber: 7, // 设置刻度数量，这里设置为7，与你的刻度值数量一致
    type: 'value',
    axisLine: {
      show: false
    },
    axisLabel: {
      color: '#87a0b9'
    },
    splitLine: {
      // 设置分割线为虚线
      lineStyle: {
        type: 'dashed', // 设置虚线类型
        color: '#6e717e', // 分割线颜色
        width: 2 // 分割线宽度
      }
    }
  },
  yAxis: {
    interval: 1, // 从第二个刻度开始显示分割线
    axisLabel: {
      color: '#87a0b9'
    },
    axisLine: {
      show: true
    },
    type: 'category',
    data: ['当前', '最低', '最高', '初始']
  },
  series: [
    {
      type: 'bar',
      name: '地热平衡',
      data: [130, 150, 45, 85],
      barWidth: '35%',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1face2' // 起始颜色
            },
            {
              offset: 0.5,
              color: '#9c59dc' // 结束颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    },
    {
      name: '节能环保',
      type: 'bar',
      barWidth: '35%', // 设置柱子宽度
      data: [100, 95, 65, 32],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1bb1e1' // 起始颜色
            },
            {
              offset: 0.5,
              color: '#1bcb9c' // 结束颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    }
  ]
}
//指定饼图
let optionPie = {
  title: [
    {
      text: '覆盖区域',
      textStyle: { fontSize: '14px', color: '#4a80a2' },
      top: '40%',
      left: '48%',
      textAlign: 'center'
    },
    {
      text: '80%',
      textStyle: { fontSize: '14px', color: '#27d9c8' },
      top: '55%',
      left: '48%',
      textAlign: 'center'
    }
  ],
  series: [
    {
      type: 'pie',
      startAngle: 40,
      radius: ['65%', '100%'],
      center: ['50%', '50%'],
      data: [
        {
          value: 130,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: '#2b6480' }, // 渐变起始色
                { offset: 0.5, color: '#2adfcd' }, // 渐变结束色
                { offset: 1, color: '#2b6480' } // 渐变结束色
              ]
            }
          }
        },
        { value: 50, itemStyle: { color: 'transparent' } } // 透明部分
      ],
      label: {
        show: false // 不显示标签
      }
    }
  ]
}
let optionList = {
  //修改全部柱子的颜色
  // color: ['red'],
  //修改图表大小
  grid: {
    containLabel: true,
    bottom: '0',
    left: '0',
    right: '0',
    top: '30'
  },
  title: {
    text: '元/天',
    textStyle: {
      color: '#4671bc' // 设置标题颜色
    },
    left: '60',
    top: '0'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {},
  xAxis: {
    //设置坐标刻度标签
    data: ['6-27', '6-28', '6-29', '6-30', '7-1', '7-2', '7-3'],
    //设置坐标轴标签
    axisLabel: {
      fontSize: '0.125rem', // 字体大小
      color: '#87a0b9'
    },
    //设置坐标轴的线
    axisLine: {
      //不显示样式
      show: false
    }
  },
  yAxis: {
    //虚线
    splitLine: {
      lineStyle: {
        type: 'dashed',
        width: 1.5, // 线宽
        color: '#ccc', // 线颜色
        dashOffset: -30 // 设置虚线的偏移量，影响虚线间隔
      }
    },
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    }
  },
  series: [
    {
      // name: '销量'
      type: 'bar',
      data: [
        {
          value: 10,
          itemStyle: {
            color: '#4c81dd'
          }
        },
        {
          value: 50,
          itemStyle: {
            color: '#38d9d0'
          }
        },
        {
          value: 200,
          itemStyle: {
            color: '#4c81dd'
          }
        },
        {
          value: 330,
          itemStyle: {
            color: '#38d9d0'
          }
        },
        {
          value: 390,
          itemStyle: {
            color: '#4c81dd'
          }
        },
        {
          value: 330,
          itemStyle: {
            color: '#38d9d0'
          }
        },
        {
          value: 230,
          itemStyle: {
            color: '#4c81dd'
          }
        }
      ]
    }
  ]
}
//指定饼图
let optionPie_1 = {
  color: ['#3951f2', '#1bcb9c', '#3bdad1', '#6060ff', '#08b5f2', '#c304ff'],
  graphic: {
    elements: [
      {
        type: 'image',
        left: '26.5%',
        top: '50%',
        style: { image: fy, width: 30, height: 30 }
      }
    ]
  },
  title: [
    {
      text: '业主关怀',
      textStyle: { fontSize: '12px', color: '#fff' },
      top: '35%',
      left: '28.5%',
      textAlign: 'center'
    }
  ],
  legend: {
    orient: 'vertical',
    right: '10%',
    top: 'middle',
    textStyle: { color: '#fff', fontSize: '.1625rem' }
  },
  tooltip: {},
  legendHoverLink: true,
  series: [
    {
      type: 'pie',
      data: [
        { value: 40, name: '天棚主机' },
        { value: 70, name: '天棚水泵' },
        { value: 80, name: '新风主机' },
        { value: 100, name: '新风水泵' },
        { value: 80, name: '地源水泵' },
        { value: 60, name: '冷却水泵' }
      ],
      radius: ['50%', '75%'],
      label: { show: false },
      center: ['30%', '50%']
    }
  ]
}
//指定折线图
let optionLine = {
  grid: {
    left: '0rem',
    top: '13rem',
    right: '10',
    bottom: '30rem',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['6-27', '6-28', '6-29', '6-30', '7-1', '7-2', '7-3', '7-4', '7-5'],
    //设置坐标轴标签
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    },
    //设置坐标轴的线
    axisLine: {
      //不显示样式
      show: false
    }
  },
  yAxis: {
    //虚线
    splitLine: {
      lineStyle: {
        type: 'dashed',
        width: 1.5, // 线宽
        color: '#ccc', // 线颜色
        dashOffset: -30 // 设置虚线的偏移量，影响虚线间隔
      }
    },
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    }
  },
  lineStyle: {
    color: '#4a1b64'
  },
  series: [
    {
      data: [20, 29, 40, 33, 68, 55, 43, 33, 10],
      type: 'line',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4a1b64' }, // 渐变起始颜色
          { offset: 1, color: '#14435c' } // 渐变结束颜色
        ])
      },
      itemStyle: {
        color: '#cd6e6e',
        borderWidth: '2px'
      }
    }
  ]
}
onMounted(() => {
  myChartBar = echarts.init(across_bar.value)
  myChartBar.setOption(optionBar)
  myChartPie = echarts.init(camera_round.value)
  myChartPie.setOption(optionPie)
  myChartList = echarts.init(data_content.value)
  myChartList.setOption(optionList)
  myChartPie_1 = echarts.init(pie_content_1.value)
  myChartPie_1.setOption(optionPie_1)
  myChartLine = echarts.init(line_content.value)
  myChartLine.setOption(optionLine)
  window.addEventListener('resize', function () {
    myChartPie_1.resize()
    myChartPie.resize()
    myChartList.resize()
    myChartBar.resize()
    myChartLine.resize()
  })
})
const scale = inject('scale')
const leave = ref(false)
onBeforeRouteLeave((to, from, next) => {
  leave.value = true
  setTimeout(() => {
    next()
  }, 200)
})
</script>
<template>
  <div class="security_layout">
    <div
      class="left pl"
      :style="{ '--scale-factor': scale }"
      :class="{ 'slide-in-left-leave': leave, 'slide-in-left': !leave }"
    >
      <div class="all shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>当代能效标识</div>
        </div>
        <div class="content">
          <div class="row_1">
            <span class="item_1">低</span>
            <div v-for="i in 5" :key="i" class="item_2"></div>
            <span class="item_3">高</span>
            <div class="item_4">一级</div>
          </div>
          <div class="row_2">
            <div class="left">
              <div ref="camera_round" id="camera_round"></div>
            </div>
            <div class="right">
              <div class="item_2">总负荷：32kw%</div>
              <div class="item_3">32%</div>
              <div class="item_4">总能耗：53.685kw</div>
              <div class="item_5">53.685%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="proportion shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>系统费用统计</div>
        </div>
        <div class="content">
          <div ref="data_content" id="data_content"></div>
        </div>
      </div>
      <div class="list shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>各类型费用占比</div>
        </div>
        <div class="content">
          <div ref="pie_content_1" id="pie_content_1"></div>
        </div>
      </div>
      <div class="list shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>能源分析</div>
        </div>
        <div class="content_1">
          <div id="across_bar" ref="across_bar"></div>
        </div>
      </div>
    </div>
    <div
      class="right pr shadow"
      :class="{ 'slide-in-right-leave': leave, 'slide-in-right': !leave }"
      :style="{ '--scale-factor': scale }"
    >
      <div class="overview">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>能源数据概况</div>
        </div>
        <div class="content">
          <div class="item" v-for="(item, index) in energy" :key="index">
            <div class="energy">{{ item.title }}</div>
            <div class="text">{{ item.num }}</div>
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>三相电流</div>
        </div>
        <div class="content">
          <div ref="line_content" id="line_content"></div>
        </div>
      </div>
      <div class="data">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>三相电流</div>
        </div>
        <div class="content">
          <div class="table">
            <tr class="hearder">
              <td>名称</td>
              <td>总电量</td>
              <td>总电费</td>
              <td>总负荷</td>
              <td>平均能耗</td>
            </tr>
            <tr class="Tbody" v-for="(item, index) in table" :key="index">
              <td :class="{ bg: (index + 1) % 2 == 1 }" v-for="(value, key) in item" :key="key">
                {{ value }}
              </td>
            </tr>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('@/assets/scss/EnergyConservation.scss');
@import url('@/assets/scss/common.scss');
.ml {
  margin-left: 0.175rem !important;
}
#camera_round {
  width: 1.25rem;
  height: 1.25rem;
}
</style>
